<template>
  <div class="wrap">
    <h3>官方榜</h3>
    <div class="official">
      <div
        class="item"
        v-for="(ranking, rankingIndex) in rankingList.slice(0, 4)"
        :key="ranking.id"
      >
        <div class="cover">
          <img :src="ranking.coverImgUrl" @click="checkAll(ranking.id)" />
          <div class="icon"><i class="iconfont icon-bofang"></i></div>
          <span>{{ createTime(ranking.updateTime) }}更新</span>
        </div>
        <div class="list">
          <ul class="songList">
            <li
              v-for="(item, index) in songList[rankingIndex]"
              :key="item.id"
              @dblclick="palySong(item.id)"
            >
              <span class="index">{{ index + 1 }}</span>
              <span class="songName">{{ item.name }}</span>
              <span class="singer">{{ getAllsinger(item.ar) }}</span>
            </li>
          </ul>
          <span class="all" @click="checkAll(ranking.id)">查看全部></span>
        </div>
      </div>
    </div>
    <h3>全球榜</h3>
    <div class="global">
      <div class="item" v-for="item in rankingList.slice(4)" :key="item.id">
        <song-list-item
          :imgUrl="item.coverImgUrl"
          :playCount="item.playCount"
          :listID="item.id"
          :label="item.name"
        ></song-list-item>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getRankingAPI, getSheetListAPI } from "@/api/index";
import SongListItem from "@/components/SongListItem";
export default {
  data() {
    return {
      rankingList: [], //排行榜详情
      songList: [], //歌单详情
    };
  },
  components: {
    SongListItem,
  },
  methods: {
    // 获取排行版数据
    async getRanking() {
      const res = await getRankingAPI();
      if (res.data.code == 200) {
        this.rankingList = res.data.list;
        for (let i = 0; i < 4; i++) {
          let res1 = await getSheetListAPI({ id: this.rankingList[i].id });
          this.songList.push(res1.data.playlist.tracks.slice(0, 5));
        }
      } else {
        alert("网络超时");
      }
    },
    //处理多位歌手
    getAllsinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, singers.length - 1);
    },
    // 处理创建时间  时间戳
    createTime(time) {
      let timer = moment(time);
      let m = timer.month() + 1;
      let d = timer.date();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return m + "月" + d + "日";
    },
    // 播放歌曲
    palySong(id) {
      this.$store.dispatch("play/updateSongId", id);
    },
    // 进入排行榜详情页
    checkAll(id) {
      this.$router.push({
        name: "songsheet",
        query: {
          id,
        },
      });
    },
  },
  created() {
    this.getRanking();
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 95%;
  margin: 0px auto;
  h3 {
    margin: 0;
    margin-bottom: 20px;
  }
  .official {
    width: 100%;
    .item {
      height: 210px;
      margin: 8px 0 20px 0;
      display: flex;
      justify-content: space-between;
      .cover {
        position: relative;
        img {
          width: 175px;
          height: 175px;
          border-radius: 8px;
        }
        .icon {
          position: absolute;
          top: 65px;
          left: 65px;
          display: none;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.6);
          i {
            font-size: 20px;
            display: block;
            margin-top: 9px;
            margin-left: 12px;
            color: #ff7a9e;
          }
        }
        span {
          color: white;
          font-size: 12px;
          position: absolute;
          top: 110px;
          left: 49px;
        }
      }
      .cover:hover .icon {
        display: block;
      }
      .list {
        width: 570px;
        ul {
          width: 100%;
          font-size: 13px;
          color: #333;
          li {
            display: block;
            height: 35px;
            width: 100%;
            border-radius: 4px;
            display: flex;
            user-select: none;
            span {
              display: block;
              color: #666;
              line-height: 35px;
              cursor: default;
            }
            .index {
              width: 7%;
              font-size: 16px;
              text-align: center;
              color: #999;
            }
            .songName {
              width: 57%;
              color: black;
              display: flex;
              .songname {
                max-width: 200px;
                overflow: hidden;
                word-wrap: break-word; /*强制换行*/
                overflow: hidden; /*超出隐藏*/
                text-overflow: ellipsis; /*隐藏后添加省略号*/
                white-space: nowrap; /*强制不换行*/
              }
            }
            .singer {
              font-size: 12px;
              width: 36%;
              text-align: right;
              overflow: hidden;
              word-wrap: break-word; /*强制换行*/
              overflow: hidden; /*超出隐藏*/
              text-overflow: ellipsis; /*隐藏后添加省略号*/
              white-space: nowrap; /*强制不换行*/
              padding-right: 10px;
            }
          }
          li:nth-child(-n + 3) .index {
            color: #ff7a9e;
          }
          li:nth-child(2n-1) {
            background-color: rgb(249, 249, 249);
          }
          li:hover {
            background-color: rgb(240, 241, 242);
          }
          .item .action:hover {
            color: black;
          }
        }
        .all {
          font-size: 12px;
          color: #999;
          padding-left: 10px;
        }
        .all:hover {
          color: black;
          cursor: pointer;
        }
      }
    }
  }
  .global {
    width: 100%;
    display: flex;
    margin-top: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    .item:last-child:nth-child(5n-1) {
      margin-right: 153px;
    }
    .item:last-child:nth-child(5n-2) {
      margin-right: 314px;
    }
    .item:last-child:nth-child(5n-3) {
      margin-right: 467px;
    }
    .item:last-child:nth-child(5n-4) {
      margin-right: 620px;
    }
  }
}
</style>